<template>
    <div>
      <el-table
        v-if="noResponse"
        v-loading="loading"
        style="width: 100%;height: 390px;margin: 10px auto;z-index: 1">
      </el-table>
      <el-empty v-if="isEmpty" :image-size="200"></el-empty>
      <div class="basicData" v-if="!noResponse">
        <div v-for="(item,index) in baseData" :key="index">
          <div>{{item.infoName}}</div>
          <div>{{item.counts}}</div>
        </div>
      </div>
      <div v-resize="resize" class="data" ref="chart01" id="chart01" v-if="!noResponse"></div>
      <div class="data" ref="chart02" id="chart02" v-if="!noResponse"></div>
      <div class="data" ref="chart03" id="chart03" v-if="!noResponse"></div>
      <div>
        <div class="data-sub gender" ref="chart04" id="chart04" v-if="!noResponse"></div>
        <div class="data-sub codeAge" ref="chart05"  id="chart05" v-if="!noResponse"></div>



      </div>
      <div class="data" ref="chart06" id="chart06" v-if="!noResponse"></div>
    </div>
</template>

<script>
import { resolve } from 'path'
import { time } from 'console'

    export default {
        name: "AdminData",
        data(){
            return{
                loading:"true",
                isEmpty:false,
                noResponse: true,
                baseURL:'http://localhost:8081/adminPage/getCountsForAll',
                baseURLForEchart01:'http://localhost:8081/adminPage/getUserIncreaseInfo',
                baseURLForEchart02:'http://localhost:8081/adminPage/getUserActiveInfo',
                baseURLForEchart03:'http://localhost:8081/adminPage/getUserWorksIncreaseInfo',
                baseURLForEchart04:'http://localhost:8081/adminPage/getUserGenderInfo',
                baseURLForEchart05:'http://localhost:8081/adminPage/getUserCoderAgeInfo',
                baseURLForEchart06:'http://localhost:8081/adminPage/getReportTypeInfo',
                baseData:'',
                res1: "",
                res2: "",
                res3: "",
                res4: "",
                res5: "",
                res6: "",
            }
        },
        mounted(){
            this.noResponse=false  // 这个很重要，一定要放在echart初始化之前进行，因为避免获取不到指定的dom
            this.$emit("component","data")
            this.getBaseData()
            this.echartInit01()
            this.echartInit02()
            this.echartInit03()
            this.echartInit04()
            this.echartInit05()
            this.echartInit06()
        },
        directives: {  // 使用局部注册指令的方式
            resize: { // 指令的名称
                bind (el, binding) { // el为绑定的元素，binding为绑定给指令的对象
                    let width = '', height = '';
                    function isReize () {
                    const style = document.defaultView.getComputedStyle(el);
                    if (width !== style.width || height !== style.height) {
                        binding.value();  // 关键
                    }
                    width = style.width;
                    height = style.height;
                    }
                    el.__vueSetInterval__ = setInterval(isReize, 30);
                },
                unbind (el) {
                    clearInterval(el.__vueSetInterval__);
                }
            }
        },

        methods:{
            getBaseData(){
                this.axios.post(this.baseURL).then(res=>{
                    // this.noResponse=false
                    if (res.data != false){
                        this.baseData = res.data
                    } else {
                        this.$message.error("服务器异常（总的信息数）...")
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            echartInit01(){
                this.axios.post(this.baseURLForEchart01).then(res=>{
                    if (res.data != false){
                        this.res1 = res
                    } else {
                        console.log("服务器异常（用户增长趋势）...")
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )

            },
            echartInit02(){
                this.axios.post(this.baseURLForEchart02).then(res=>{
                    if (res.data != false){
                        this.res2 = res
                    } else {
                        console.log("服务器异常（用户活跃趋势）...")
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )

            },
            echartInit03(){
                this.axios.post(this.baseURLForEchart03).then(res=>{
                    if (res.data != false){
                        this.res3 = res
                    } else {
                        console.log("服务器异常（作品增长趋势）...")
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )

            },
            echartInit04(){
                this.axios.post(this.baseURLForEchart04).then(res=>{
                    if (res.data != false){
                        this.res4 = res
                    } else {
                        console.log("服务器异常（用户性别比例）...")
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )

            },
            echartInit05(){
                this.axios.post(this.baseURLForEchart05).then(res=>{
                    if (res.data != false){
                        this.res5 = res
                    } else {
                        console.log("服务器异常（用户码龄比例）...")
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )

            },
            echartInit06(){
                this.axios.post(this.baseURLForEchart06).then(res=>{
                    if (res.data != false){
                        this.res6 = res
                    } else {
                        console.log("服务器异常（举报类型分布）...")
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )

            },
            echartsRendering01(res){
                // 获取实例dom对象
                let myChart = this.$echarts.getInstanceByDom(
                    this.$refs.chart01
                )
                // 没有则重新获取
                if (myChart == null) {
                    myChart = this.$echarts.init(this.$refs.chart01);
                }
                myChart.setOption({
                    tooltip: {
                        trigger: "axis"
                    },
                    legend: {
                        // 如果series 对象有name 值，则 legend可以不用写data
                        // 修改图例组件 文字颜色
                        textStyle: {
                            color: "black"
                        },
                        // 这个10% 必须加引号
                        right: "10%",
                        top: "5%"
                    },
                    grid: {
                        top: "20%",
                        left: "3%",
                        right: "4%",
                        bottom: "5%",
                        show: true, // 显示边框
                        borderColor: "#012f4a", // 边框颜色
                        containLabel: true // 包含刻度文字在内
                    },
                    title: {
                        text: "用户增长趋势",
                        top: "10px",
                        left: "20px"
                    },

                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: [
                            res.data[11].datetime,
                            res.data[10].datetime,
                            res.data[9].datetime,
                            res.data[8].datetime,
                            res.data[7].datetime,
                            res.data[6].datetime,
                            res.data[5].datetime,
                            res.data[4].datetime,
                            res.data[3].datetime,
                            res.data[2].datetime,
                            res.data[1].datetime,
                            res.data[0].datetime,
                        ],
                    },
                    yAxis: {
                        type: "value",
                        splitLine: {
                            lineStyle: {
                                color: "#012f4a" // 分割线颜色
                            }
                        }
                    },
                    series: [
                        {
                            name: "用户数",
                            type: "line",
                            // true 可以让我们的折线显示带有弧度
                            smooth: true,
                            data: [
                                res.data[11].userCount,
                                res.data[10].userCount,
                                res.data[9].userCount,
                                res.data[8].userCount,
                                res.data[7].userCount,
                                res.data[6].userCount,
                                res.data[5].userCount,
                                res.data[4].userCount,
                                res.data[3].userCount,
                                res.data[2].userCount,
                                res.data[1].userCount,
                                res.data[0].userCount,
                            ],
                        },
                    ]
                })
                return myChart
            },
            echartsRendering02(res){
                // 获取实例dom对象
                let myChart = this.$echarts.getInstanceByDom(
                    this.$refs.chart02
                )
                // 没有则重新获取
                if (myChart == null) {
                    myChart = this.$echarts.init(this.$refs.chart02);
                }
                myChart.setOption({
                    tooltip: {
                        trigger: "axis"
                    },
                    legend: {
                        // 如果series 对象有name 值，则 legend可以不用写data
                        // 修改图例组件 文字颜色
                        textStyle: {
                            color: "black"
                        },
                        // 这个10% 必须加引号
                        right: "10%",
                        top:"5%"
                    },
                    grid: {
                        top: "20%",
                        left: "3%",
                        right: "4%",
                        bottom: "5%",
                        show: true, // 显示边框
                        borderColor: "#012f4a", // 边框颜色
                        containLabel: true // 包含刻度文字在内
                    },
                    title:{
                        text:"用户活跃趋势",
                        top:"10px",
                        left: "20px"
                    },

                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: [
                            res.data[11].datetime,
                            res.data[10].datetime,
                            res.data[9].datetime,
                            res.data[8].datetime,
                            res.data[7].datetime,
                            res.data[6].datetime,
                            res.data[5].datetime,
                            res.data[4].datetime,
                            res.data[3].datetime,
                            res.data[2].datetime,
                            res.data[1].datetime,
                            res.data[0].datetime,
                        ],
                    },
                    yAxis: {
                        type: "value",
                        splitLine: {
                            lineStyle: {
                                color: "#012f4a" // 分割线颜色
                            }
                        }
                    },
                    series: [
                        {
                            name: "活跃数",
                            color: "rgb(180, 181, 0)",
                            type: "line",
                            // true 可以让我们的折线显示带有弧度
                            smooth: true,
                            data: [
                                res.data[11].userActiveCount,
                                res.data[10].userActiveCount,
                                res.data[9].userActiveCount,
                                res.data[8].userActiveCount,
                                res.data[7].userActiveCount,
                                res.data[6].userActiveCount,
                                res.data[5].userActiveCount,
                                res.data[4].userActiveCount,
                                res.data[3].userActiveCount,
                                res.data[2].userActiveCount,
                                res.data[1].userActiveCount,
                                res.data[0].userActiveCount,
                            ]
                        },
                    ]
                })
                return myChart;
            },
            echartsRendering03(res){
                // 获取实例dom对象
                let myChart = this.$echarts.getInstanceByDom(
                    this.$refs.chart03
                )
                // 没有则重新获取
                if (myChart == null) {
                    myChart = this.$echarts.init(this.$refs.chart03);
                }
                myChart.setOption({
                    tooltip: {
                        trigger: "axis"
                    },
                    legend: {
                        // 如果series 对象有name 值，则 legend可以不用写data
                        // 修改图例组件 文字颜色
                        textStyle: {
                            color: "black"
                        },
                        // 这个10% 必须加引号
                        right: "10%",
                        top:"5%"
                    },
                    grid: {
                        top: "20%",
                        left: "3%",
                        right: "4%",
                        bottom: "5%",
                        show: true, // 显示边框
                        borderColor: "#012f4a", // 边框颜色
                        containLabel: true // 包含刻度文字在内
                    },
                    title:{
                        text:"作品增长趋势",
                        top:"10px",
                        left: "20px"
                    },

                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: [
                            res.data[11].datetime,
                            res.data[10].datetime,
                            res.data[9].datetime,
                            res.data[8].datetime,
                            res.data[7].datetime,
                            res.data[6].datetime,
                            res.data[5].datetime,
                            res.data[4].datetime,
                            res.data[3].datetime,
                            res.data[2].datetime,
                            res.data[1].datetime,
                            res.data[0].datetime,
                        ],
                    },
                    yAxis: {
                        type: "value",
                        splitLine: {
                            lineStyle: {
                                color: "#012f4a" // 分割线颜色
                            }
                        }
                    },
                    series: [
                        {
                            name: "error",
                            type: "line",
                            // true 可以让我们的折线显示带有弧度
                            smooth: true,
                            data: [
                                res.data[11].errorCount,
                                res.data[10].errorCount,
                                res.data[9].errorCount,
                                res.data[8].errorCount,
                                res.data[7].errorCount,
                                res.data[6].errorCount,
                                res.data[5].errorCount,
                                res.data[4].errorCount,
                                res.data[3].errorCount,
                                res.data[2].errorCount,
                                res.data[1].errorCount,
                                res.data[0].errorCount,
                            ]
                        },
                        {
                            name: "question",
                            type: "line",
                            // true 可以让我们的折线显示带有弧度
                            smooth: true,
                            data: [
                                res.data[11].questionCount,
                                res.data[10].questionCount,
                                res.data[9].questionCount,
                                res.data[8].questionCount,
                                res.data[7].questionCount,
                                res.data[6].questionCount,
                                res.data[5].questionCount,
                                res.data[4].questionCount,
                                res.data[3].questionCount,
                                res.data[2].questionCount,
                                res.data[1].questionCount,
                                res.data[0].questionCount,
                            ]
                        },
                        {
                            name: "blink",
                            type: "line",
                            // true 可以让我们的折线显示带有弧度
                            smooth: true,
                            data: [
                                res.data[11].blinkCount,
                                res.data[10].blinkCount,
                                res.data[9].blinkCount,
                                res.data[8].blinkCount,
                                res.data[7].blinkCount,
                                res.data[6].blinkCount,
                                res.data[5].blinkCount,
                                res.data[4].blinkCount,
                                res.data[3].blinkCount,
                                res.data[2].blinkCount,
                                res.data[1].blinkCount,
                                res.data[0].blinkCount,
                            ]
                        },
                    ]
                })
                return myChart;
            },
            echartsRendering04(res){
                // 获取实例dom对象
                let myChart = this.$echarts.getInstanceByDom(
                    this.$refs.chart04
                )
                // 没有则重新获取
                if (myChart == null) {
                    myChart = this.$echarts.init(this.$refs.chart04);
                }
                myChart.setOption({
                    title:{
                        text:"用户性别比例",
                        top:"10px",
                        left: "20px"
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        bottom: "5%",
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            color: "rgba(255,255,255,.5)",
                            fontSize: "10"
                        }
                    },
                    series: [
                        {
                            name: "性别分布/个",
                            type: "pie",
                            // 这个radius可以修改饼形图的大小
                            // radius 第一个值是内圆的半径 第二个值是外圆的半径
                            radius: ["0%", "70%"],
                            // center: ["50%", "50%"],
                            roseType: "radius",
                            // 图形的文字标签
                            label: {
                                fontSize: 12
                            },
                            // 链接图形和文字的线条
                            labelLine: {
                                // length 链接图形的线条
                                length: 6,
                                // length2 链接文字的线条
                                length2: 8
                            },
                            data: [
                                { value: res.data[0].userCount, name: res.data[0].userGender },
                                { value: res.data[1].userCount, name: res.data[1].userGender },
                            ]
                        }
                    ]
                })
                return myChart
            },
            echartsRendering05(res){
                // 获取实例dom对象
                let myChart = this.$echarts.getInstanceByDom(
                    this.$refs.chart05
                )
                // 没有则重新获取
                if (myChart == null) {
                    myChart = this.$echarts.init(this.$refs.chart05);
                }
                myChart.setOption({
                    title:{
                        text:"用户码龄比例",
                        top:"10px",
                        left: "20px"
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },

                    legend: {
                        bottom: "5%",
                        // 修改小图标的大小
                        itemWidth: 10,
                        itemHeight: 10,
                        // 修改图例组件的文字为 12px
                        textStyle: {
                            color: "rgba(255,255,255,.5)",
                            fontSize: "12"
                        }
                    },
                    series: [
                        {
                            name: "码龄分布/年",
                            type: "pie",
                            // 这个radius可以修改饼形图的大小
                            // radius 第一个值是内圆的半径 第二个值是外圆的半径
                            radius: ["40%", "65%"],
                            center: ["50%", "45%"],
                            avoidLabelOverlap: false,
                            // 图形上的文字
                            label: {
                                show: false,
                                position: "center"
                            },
                            // 链接文字和图形的线是否显示
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: res.data[0].codeAgeCount, name: res.data[0].codeAgeScope },
                                { value: res.data[1].codeAgeCount, name: res.data[1].codeAgeScope },
                                { value: res.data[2].codeAgeCount, name: res.data[2].codeAgeScope },
                                { value: res.data[3].codeAgeCount, name: res.data[3].codeAgeScope },
                                { value: res.data[4].codeAgeCount, name: res.data[4].codeAgeScope }
                            ]
                        }
                    ]
                })
                return myChart
            },
            echartsRendering06(res){
                // 获取实例dom对象
                let myChart = this.$echarts.getInstanceByDom(
                    this.$refs.chart06
                )
                // 没有则重新获取
                if (myChart == null) {
                    myChart = this.$echarts.init(this.$refs.chart06);
                }
                myChart.setOption({
                    title:{
                        text:"举报类型分布",
                        top:"10px",
                        left: "20px"
                    },
                    color: ["#2a71b1"],
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    // 修改图表的大小
                    grid: {
                        left: "3%",
                        top: "20%",
                        right: "5%",
                        bottom: "5%",
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: "category",
                            data: [
                                res.data[0].reportedClassify,
                                res.data[1].reportedClassify,
                                res.data[2].reportedClassify,
                                res.data[3].reportedClassify,
                                res.data[4].reportedClassify,
                                res.data[5].reportedClassify,
                                res.data[6].reportedClassify
                            ],
                            axisTick: {
                                alignWithLabel: true
                            },
                            // 修改刻度标签 相关样式
                            axisLabel: {
                                color: "rgb(100,100,100)",
                                fontSize: "12"  //x轴的字体大小
                            },
                            // 不显示x坐标轴的样式
                            axisLine: {
                                // show: false
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: "value",
                            // 修改刻度标签 相关样式
                            axisLabel: {
                                color: "rgb(100,100,100)",
                                fontSize: 12
                            },
                            // y轴的线条改为了 2像素
                            axisLine: {
                                lineStyle: {
                                    color: "rgb(100,100,100)",

                                    width: 2
                                }
                            },
                            // y轴分割线的颜色
                            splitLine: {
                                lineStyle: {
                                    color: "rgb(100,100,100)",
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            // name: "直接访问",
                            type: "bar",
                            barWidth: "30%",
                            data: [
                                res.data[0].count,
                                res.data[1].count,
                                res.data[2].count,
                                res.data[3].count,
                                res.data[4].count,
                                res.data[5].count,
                                res.data[6].count,
                            ],
                            // itemStyle: {
                            //     // 修改柱子圆角
                            //     barBorderRadius: 15
                            // }
                        }
                    ]
                })
                return myChart
            },
            resize () {
                this.echartsRendering01(this.res1).resize()
                this.echartsRendering02(this.res2).resize()
                this.echartsRendering03(this.res3).resize()
                this.echartsRendering04(this.res4).resize()
                this.echartsRendering05(this.res5).resize()
                this.echartsRendering06(this.res6).resize()
            },
        }

    }
</script>

<style scoped>
  .basicData{
    width: 100%;
    height: 150px;
  }
  .basicData div{
    float: left;
    width: 22%;
    height: 140px;
    margin-right: 4%;
    border-radius: 3px;
    /*border-radius: 6px;*/
    background-color: white;
  }
  .basicData div:nth-child(4){
    margin-right: 0px;
  }
  .basicData div div{
    width: 100%;
    height: 50%;
    text-align: center;
    line-height: 70px;
  }
  .basicData div div:nth-child(1){
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    /* background-color: rgb(0, 135, 139); */
    background-color: cadetblue;
    border-bottom: 1px solid rgb(173, 173, 173);
    color: rgb(240, 240, 240);
    font-size: 16px;
  }
  .basicData div div:nth-child(2){
    font-size: 18px;
    color: rgb(0, 31, 28);
  }
  .data,.data-sub{
    width: 100%;
    /* width: 800px; */
    height: 400px;
    margin-bottom: 10px;
    /*border-radius: 6px;*/
    border-radius: 3px;
    background-color: white;
    overflow: hidden;
  }
  .data-sub{
    float: left;
    width: 49.5%;
    /*height: 400px;*/
    /*margin-bottom: 10px;*/
    /*border-radius: 6px;*/
    /*background-color: white;*/
    /*overflow: hidden;*/
  }
  .gender{
    margin-right: 1%;
  }
</style>
